<template>
  <div class="bill-root">
    <van-sticky>
      <van-nav-bar title="电子账单" left-arrow @click-left="$router.goBack()" />

      <div class="fixd-box">
        <div class="card-box flex-btw">
          <div class="col" @click="activity = 2">
            <div class="name">今日盈利(USDT)</div>
            <div class="num">{{todayProfit}}</div>
          </div>

          <div class="col" @click="activity = 1">
            <div class="name">累计盈利(USDT)</div>
            <div class="num">{{totalProfit}}</div>
          </div>
        </div>

        <div class="title">{{ activity==2 ? "今日盈利" : "累计盈利" }}</div>
      </div>
    </van-sticky>

    <div class="list-box">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
		:offset="2"
      >
        <!-- 累计盈利 -->
        <div
          v-if="activity==1"
          v-for="item in lists"
          :key="item.id"
          class="today-item flex-btw"
        >
          <div class="type">盈利</div>

          <div class="money">{{item.profit}} USDT</div>

          <div class="time">{{item.time}}</div>
        </div>

        <!-- 今日盈利 -->
        <div
          class="item"
          v-if="activity==2"
          v-for="item in lists"		
          :key="item.id"
        >
          <div class="row flex">
            <div class="name">订单编号：</div>
            <div class="content">{{item.order_id}}</div>
          </div>

          <div class="row flex">
            <div class="name">卖出币种：</div>
            <div class="content">{{item.name}}</div>
          </div>

          <div class="row flex">
            <div class="name">卖出时间：</div>
            <div class="content">{{item.create_time}}</div>
          </div>

          <div class="row flex">
            <div class="name">盈利额度：</div>
            <div class="content">{{item.profit}} USDT</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixin.js";
import { BILL_LOG } from "@/api/api.js";
import { Toast } from "vant";

export default {
  data() {
    return {
      lists: [],
			todayProfit:0,
			totalProfit:0,
      loading: false,
      finished: false,
      activity: 2,
			page:1,
    };
  },
  watch: {
    activity(n) {
      // 1为本周盈利 1为累计盈利
      console.log(n);
			this.activity = n;
			this.page =1;
			this.lists = [];
			this.finished = false;
			this.LoadList();
    },
  },
  methods: {
		async LoadList() {
			console.log('LoadList')
		  this.loading = true;
		  const { data } = await this.$reqGet(BILL_LOG, {
		    type: this.activity,
				page: this.page,
		  });
		  
		  if (data.status == 1) {
				this.todayProfit = data.data.todayProfit;
				this.totalProfit = data.data.totalProfit;
				console.log(data.data.list);
				if(data.data.list.length > 0) {
					let list = data.data.list;
					this.lists = this.lists.concat(list);
					this.loading = false;
					this.page++;
				} else {
					console.log("没有了");
					this.finished = true;
				}
		    
		  }
		},
    onLoad() {
			console.log('onload')
			this.loading = false;
			this.LoadList();
    }
  },
};
</script>

<style lang="scss" scoped>
.bill-root {
  color: #141414;
  .fixd-box {
    padding: 0.3rem 0.3rem 0.3rem;
    border-bottom: 0.02rem solid #f0eeee;
    background-color: #fff;
    .card-box {
      .col {
        width: 3.3rem;
        height: 1.72rem;
        // background-color: #369eff;
        background: url("../../assets/images/bill/1.png");
        background-size: 100% 100%;
        border-radius: 0.1rem;

        &:nth-child(2) {
          background: url("../../assets/images/bill/2.png");
          background-size: 100% 100%;
          background-position: 0 0.03rem;
        }

        .name {
          color: #fff;
          font-size: 0.2rem;
          text-align: left;
          margin: 0.4rem 0 0 0.2rem;
        }

        .num {
          font-size: 0.26rem;
          color: #fff;
          text-align: left;
          margin: 0.18rem 0 0 0.2rem;
        }
      }
    }
  }
  .title {
    margin-top: 0.3rem;
    text-align: left;
    font-size: 0.26rem;
    background-color: #fff;
  }

  .list-box {
    .today-item {
      font-size: 0.24rem;
      padding: 0.3rem;
      color: #919191;
      border-bottom: 0.02rem solid #f0eeee;

      .money {
        color: rgb(73, 195, 174);
      }
    }

    .item {
      padding: 0.2rem 0.3rem;
      border-bottom: 0.02rem solid #f0eeee;

      .row {
        font-size: 0.2rem;
        margin-bottom: 0.15rem;

        &:last-child {
          margin-bottom: 0;
        }

        .name {
          color: #919191;
          margin-right: 0.1rem;
        }

        .content {
          color: #141414;
        }
      }
    }
  }
}
</style>
